<template>
  <ul id="component_downLoad">
    <li v-for="(dfile,dfile_index) in DownLoadFileList" :key="dfile_index" class="component_downLoad_item">
      <img :src="DownLoadFileImagePath[dfile.type]" /><span>{{dfile.name}}</span><el-button @click="DownLoadFile(dfile.downloadUrl)">下载</el-button>
    </li>
  </ul>
</template>

<script>

export default {
  data() {
    return {
      DownLoadFileImagePath:{
        word:require("@/assets/img/MicroModule/downloadfile_word.png"),
        excel:require("@/assets/img/MicroModule/downloadfile_excel.png"),
      },
      DownLoadFileList:[
        {name:"信息查询系统用户操作手册",downloadUrl:"",type:"word",icon:""},
        {name:"信息查询系统用户操作手册",downloadUrl:"",type:"excel",icon:""},
        {name:"个人不动产情况查询信息登记表",downloadUrl:"",type:"excel",icon:""},
        {name:"信息查询系统用户操作手册",downloadUrl:"",type:"word",icon:""},
        {name:"个人不动产情况查询信息登记表",downloadUrl:"",type:"word",icon:""}
      ],
    }
  },
  methods: {
    //下载文件
    DownLoadFile(file){

    }
  }
}
</script>
<style lang="scss" scoped>
#component_downLoad{
  display: block;
  position: relative;
  padding:10px 20px;
  overflow: hidden;
  margin: 0;
  li{
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    padding: 10px 0;
    img{
      width: 34px;height: 34px;
    }
    span{
      display: block;
      position: relative;
      width: calc(100% - 150px);
      word-wrap: no-wrap;
      margin-left: 20px;
      text-overflow:ellipsis;
      overflow:hidden;
      white-space: nowrap;
      color: #666666;
    }
    button{
      padding:8px 20px;
      margin-left: auto;
      background-color: #ecf7fe;
      color: #0491e9;
      border:1px #0491e9 solid;
      &:hover{
        color: #ffffff;
        background-color: #0491e9;
      }
    }
  }
}
</style>